<template>
    <div class="register">
        <span>注册</span>
        <form @submit="onSubmit" class="form-control">
            <input type="text" placeholder="邮箱" v-model="username" name="uname">
            <br>
            <input type="password" placeholder="密码" v-model="password" name="upass">
            <br>
            <input type="password" placeholder="再次输入密码" v-model="password2" name="upass2">
            <br>
            <button native-type="submit" type="info" round block>确定注册</button>
        </form>
        <div>
          <router-link  class="link" to="/login">已有账号，马上登录?</router-link>
        </div>
    </div>
</template>

<style lang="less">
.register {
    height: 100vh;
    font-size: 16px;
    width: 100%;
    form{
        margin-top: 40px;
        position: relative;
        display: block;
    }
    span {
        position: relative;
        display: block;
        left: 20px;
        top: 20px;
        width: 50px;
        font-weight: bold;
    }

    input {
        background-color: rgb(255, 255, 255);
        margin: 14px 0;
        outline: gray 1px solid;
        border: 0;
        width: 80vw;
        height: 30px;
        border-radius: 30px;
        padding-left: 20px;
    }

    button {
        width: 80vw;
        height: 40px;
        background-color: deepskyblue;
        outline: 0;
        border-radius: 30px;
        border: 0;
        margin: 20px auto;
        display: block;
    }
}
</style>
<style>
.van-dialog__footer{
    text-align: center;
    flex-grow: 1;
}
</style>

<script>
import {  Dialog  } from 'vant'
// 打开页面时
// 初始化（获取存储在本地的所有用户信息）
let sky_users = []
let sky_users_str = localStorage.getItem("SKY_USERS")
if(sky_users_str){
  // 如果本地有存储用户信息，就把这个存储信息的字符串转成数组
  sky_users = JSON.parse(sky_users_str)
}

export default{
    data() {
        return {
            username: '',
            password: '',
            password2: ''
        };
    },

    methods:{
        onSubmit(values){
            console.log('submit', values);
            let {uname, upass, upass2} = values;
            if(uname == "" || upass == "" || upass2 == "") {
                Dialog.confirm({ message: '请阅读协议和政策' })
                    .then(() => {
                        return false;
                        // on confirm
                    })
                    .catch(() => {
                        return false;
                        // on cancel
                    });
            }
            let arr = sky_users.filter(item=> item.username == uname )
            let key1 =0;
            for(let i=0; i<arr.length; i++){
                console.log(arr[i].username)
                if(arr[i].username == uname){
                    key1 = 1;
                    break;
                }
            }
            if(key1==1) {
                Dialog.confirm({ message: '请阅读协议和政策' })
                    .then(() => {
                        // on confirm
                        return false;
                    })
                    .catch(() => {
                        return false;
                        // on cancel
                    });
            }

            // 提交数据
            else {
                // let regExp = /^[0-9a-zA-Z_]{4,8}@qq.com$/
                // if(!regExp.test(uname)) {
                //     Toast('请输入邮箱格式文本')
                //     return false
                // }
                // if(upass.length < 6) {
                //     Toast('密码需要6位字符以上')
                //     return false
                // }
                // if(upass != upass2) {
                //    Toast.fail('两次输入的密码不一致')
                //    return false
                // }
                
                
                let obj = {}
                obj.id = Math.random().toString().slice(2)+"_"+(new Date().getTime())
                obj.username = uname
                obj.password = upass
                sky_users.push(obj)
                let str =  JSON.stringify(sky_users)
                localStorage.setItem('SKY_USERS',str);
                Dialog.alert({
                message: '注册成功，跳转登录。',
                }).then(() => {
                  // 跳转登录页
                  this.$router.push({path: '/login'})
                });
            }
        }
    }
}


</script>